<template lang="pug">
  .global-overview
    .title 全局概览
    .main-content
        .info-item.drill-statistics
            .item-left
                .item-title 钻孔统计
                .statistics-count
                    span(style="fontSize: 14px") 共
                    span(style="margin: 0px 6px") 2370
                    span(style="fontSize: 14px") 个
            .item-right(ref="pieChart") 图表
        .info-item.section-statistics
            .item-left
                .item-title 剖面统计
                .statistics-count ...
</template>

<script>
export default {
  name: 'globalOverview',
  mounted () {
    this.$nextTick(() => {
      this.initPie()
    })
  },
  methods: {
    // // 引入echarts
    initPie () {
      const chartDom = this.$refs.pieChart

      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(chartDom)
      // 绘制图表
      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '100%',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [
              { value: 300, name: '金水区' },
              { value: 345, name: '郑东新区' },
              { value: 123, name: '管城回族区' },
              { value: 678, name: '二七区' },
              { value: 687, name: '中原区' },
              { value: 300, name: '管城区' },
              { value: 378, name: '高新区' },
              { value: 300, name: '惠济区' }
            ]
          }
        ]
      }

      myChart.setOption(option)
    }
  }
}
</script>

<style lang="stylus" scoped>
.global-overview
    width 100%
    height calc(100% - 164px)
    position: absolute;
    .title
        position: absolute;
        top: -48px;
        color: white;
        font-size: 22px;
        left: 18px;
.main-content
    display flex
    flex-direction column
    padding 24px 12px
    .info-item
        padding 12px
        margin-bottom 12px
        background-color rgba(248,248,251,0.8);
        border-radius 8px
        box-shadow: 0px 0 3px -2px rgb(53 71 33 / 67%)
.drill-statistics
    height 160px
    width 100%
    display flex
    .item-left
        width 50%
        .item-title
            color #8283b2
            font-size 14px
        .statistics-count
            margin: 34px 20px;
            color #000
            font-size 38px

    .item-right
        width 136px
        height 136px

.section-statistics
    height 70px
    width 100%
    display flex
    .item-left
        width 50%
        .item-title
            color #8283b2
            font-size 14px
        .statistics-count
            // margin: 6px 20px;
            color #000
            font-size 24px

</style>
